<template>
  <transition appear name="slide-fade">
    <div class="list-container">
      <header class="header">
        <router-link to="/rank">
          <img
            class="close-icon"
            src="../assets/icon/close-white.svg"
            alt="close"
          />
        </router-link>
        <h1 class="heading">
          参赛证书
          <p style="margin: 0; font-size: 8pt">长按保存</p>
        </h1>
      </header>
      <div class="content">
        <div style="display: none">
          <img ref="certImg" src="@/assets/certificate.jpg" alt="certificate" />
          <canvas id="certificate" />
        </div>
        <div>
          <img :src="image" style="width: 100%" alt="certificate" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { decode } from "js-base64";

export default {
  name: "CertificateView",
  data() {
    return {
      image: "",
      info: {
        name: "一定是特别的缘分",
        rank: 111,
        score: 666,
      },
    };
  },
  created() {
    // console.log(decode(this.$route.query.v));
    this.info = JSON.parse(decode(this.$route.query.v));
    // console.log(this.$route.params);
  },
  mounted() {
    this.initCancas();
  },
  methods: {
    initCancas() {
      // console.log("初始化canvas");
      const container = document.querySelector(".content");
      const canvas = document.getElementById("certificate");
      const W = container.clientWidth;
      const H = container.clientHeight;
      canvas.width = W;
      canvas.height = H;
      const ctx = canvas.getContext("2d");
      const RADIO = this.getPixelRatio(ctx);
      ctx.scale(RADIO, RADIO);
      const img = this.$refs.certImg;
      img.onload = () => {
        const imgScale = img.width / img.height;
        canvas.style.width = canvas.width + "px";
        canvas.style.height = canvas.width / imgScale + "px";
        canvas.width = canvas.width * RADIO;
        canvas.height = canvas.width / imgScale;
        ctx.drawImage(
          img,
          0,
          0,
          img.width,
          img.height,
          0,
          0,
          canvas.width,
          canvas.height
        );
        //字体大小
        ctx.textAlign = "center";
        const NORMAL_SIZE = canvas.width * 0.03;
        const SMALL_SIZE = canvas.width * 0.024;
        const nameHeight = canvas.height * 0.55;
        const subTitleHeight = canvas.height * 0.58;
        const nameWidth = canvas.width * 0.8;
        const valueHeight = canvas.height * 0.748;
        const valueWidth = canvas.width * 0.2;
        ctx.font = `${NORMAL_SIZE}pt Arial`;
        if (this.info.username === "") {
          ctx.fillText(
            this.info.name,
            // "测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度",
            canvas.width / 2,
            nameHeight,
            nameWidth
          );
        } else {
          ctx.fillText(
            this.info.username,
            // "测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度",
            canvas.width / 2,
            nameHeight,
            nameWidth
          );
          if (this.info.teamName !== "") {
            ctx.font = `${SMALL_SIZE}pt Arial`;
            ctx.fillText(
              `(${this.info.teamName})`,
              // "测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度测试长度",
              canvas.width / 2,
              subTitleHeight,
              nameWidth
            );
            ctx.font = `${NORMAL_SIZE}pt Arial`;
          }
        }
        ctx.font = `bold ${canvas.width * 0.04}pt Arial`;
        ctx.fillStyle = "#f53f3f";
        ctx.fillText(
          this.info.rank,
          canvas.width * 0.41,
          valueHeight,
          valueWidth
        );
        ctx.fillText(
          this.info.score,
          canvas.width * 0.75,
          valueHeight,
          valueWidth
        );
        //合成图片
        this.image = canvas.toDataURL("image/jpg", 1.0);
      };
    },
    getPixelRatio(context) {
      const backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    },
  },
};
</script>

<style lang="scss" scoped>
$themeColor: #d32f2f;

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.4s;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: rotateY(45deg);
  opacity: 0;
}
.list-container {
  width: 100%;
  height: 100vh;
  background-color: $themeColor;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    border-bottom: solid 1px #ad1f1f;
    .close-icon {
      position: absolute;
      top: 16px;
      left: 16px;
      width: 14px;
      height: 14px;
    }
    .heading {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
    }
  }
  .content {
    flex: 1;
    overflow: scroll;
    display: flex;
    align-items: center;
    div {
      max-height: 100%;
    }
  }
}
</style>
